<template>
  <view class="fortune-card-container" :class="{ 'fortune-locked': locked }">
    <!-- 运势卡片 -->
    <view class="fortune-card" @click="showFortune" v-if="!showResult">
      <view class="card-title">
        <image src="/static/icons/dice.png" class="title-icon" />
        <text>今日运势</text>
      </view>
      <view class="card-hint">点击查看今日运势</view>
    </view>

    <!-- 运势结果 -->
    <view class="fortune-result" v-if="showResult">
      <view class="result-title">今日运势</view>
      <view class="result-content">
        <text class="typing-text">{{ displayedText }}</text>
      </view>
      <view class="result-footer">
        <text class="refresh-hint" @click="refreshFortune">消耗3点能量刷新</text>
      </view>
    </view>

    <!-- 能量不足提示 -->
    <uni-popup ref="energyPopup" type="center">
      <view class="popup-content">
        <text>能量不足，需要3点能量</text>
        <button class="popup-button" @click="$refs.energyPopup.close()">确定</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { getTodayFortune, STORAGE_KEYS } from '../utils/storage.js'
import { getEnergy, consumeEnergy } from '../utils/achievements.js'

export default {
  name: 'FortuneCard',
  props: {
    locked: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      showResult: false,
      displayedText: '',
      fullText: '',
      typingIndex: 0,
      typingTimer: null,
      energyNeeded: 3,
      fortuneTexts: [
        '今天是美好的一天，保持积极心态会有意外收获',
        '注意健康饮食，身体是革命的本钱',
        '与朋友多交流，可能会有惊喜',
        '工作运势不错，适合处理重要事务',
        '学习效率很高，适合吸收新知识',
        '财运平稳，理性消费很重要'
      ]
    }
  },
  methods: {
    showFortune() {
      if (this.locked) return
      
      const currentEnergy = getEnergy()
      if (currentEnergy >= this.energyNeeded) {
        if (consumeEnergy(this.energyNeeded)) {
          uni.$emit('energy-changed')
          this.playResultSound()
          
          // 随机选择一条运势
          this.fullText = this.fortuneTexts[Math.floor(Math.random() * this.fortuneTexts.length)]
          this.showResult = true
          this.startTyping()
          
          // 保存今日运势
          this.saveTodayFortune(this.fullText)
        }
      } else {
        this.$refs.energyPopup.open()
      }
    },
    
    refreshFortune() {
      this.showFortune()
    },
    
    startTyping() {
      this.typingIndex = 0
      this.displayedText = ''
      
      this.typingTimer = setInterval(() => {
        if (this.typingIndex < this.fullText.length) {
          this.displayedText += this.fullText.charAt(this.typingIndex)
          this.typingIndex++
        } else {
          clearInterval(this.typingTimer)
        }
      }, 50)
    },
    
    playResultSound() {
      const innerAudioContext = uni.createInnerAudioContext()
      innerAudioContext.src = '/static/sounds/achievement.mp3'
      innerAudioContext.play()
    },
    
    saveTodayFortune(text) {
      const today = new Date().toISOString().split('T')[0]
      const fortuneData = uni.getStorageSync(STORAGE_KEYS.FORTUNE_DATA) || {}
      fortuneData[today] = text
      uni.setStorageSync(STORAGE_KEYS.FORTUNE_DATA, fortuneData)
    }
  },
  
  beforeDestroy() {
    if (this.typingTimer) {
      clearInterval(this.typingTimer)
    }
  }
}
</script>

<style lang="scss">
.fortune-card-container {
  background-color: #fff;
  border-radius: 24rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  margin-top: 40rpx;
  
  &.fortune-locked {
    opacity: 0.7;
  }
  
  .fortune-card {
    padding: 24rpx;
    text-align: center;
    
    .card-title {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16rpx;
      
      .title-icon {
        width: 48rpx;
        height: 48rpx;
        margin-right: 16rpx;
      }
      
      text {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
      }
    }
    
    .card-hint {
      font-size: 28rpx;
      color: #666;
    }
  }
  
  .fortune-result {
    padding: 24rpx;
    
    .result-title {
      font-size: 36rpx;
      font-weight: bold;
      text-align: center;
      margin-bottom: 32rpx;
      color: #4CAF50;
    }
    
    .result-content {
      min-height: 200rpx;
      padding: 24rpx;
      background-color: #f9f9f9;
      border-radius: 16rpx;
      margin-bottom: 32rpx;
      
      .typing-text {
        font-size: 28rpx;
        line-height: 1.6;
        color: #333;
      }
    }
    
    .result-footer {
      text-align: center;
      
      .refresh-hint {
        font-size: 24rpx;
        color: #666;
        text-decoration: underline;
      }
    }
  }
  
  .popup-content {
    padding: 40rpx;
    background-color: #fff;
    border-radius: 16rpx;
    text-align: center;
    
    .popup-button {
      margin-top: 32rpx;
      background-color: #007AFF;
      color: white;
      border-radius: 12rpx;
      padding: 16rpx 32rpx;
    }
  }
}
</style>